<template>
  <div class="relative-full">
    <v-navigation-drawer
      v-model="drawer"
      :clipped="$vuetify.breakpoint.lgAndUp"
      app
    >
      <template v-slot:prepend>
        <div style="padding: 22px 30px">
          <v-btn width="100%"
                 rounded
                 color="primary"
                 @click="handleCreateArticleBtnClick"
                 dark>
            <v-icon left>create</v-icon>
            创 建
          </v-btn>
        </div>
      </template>

      <v-divider></v-divider>
      <v-list dense>
        <template v-for="item in items">
          <v-list-group
            v-if="item.children"
            :key="item.text"
            v-model="item.model"
            :prepend-icon="item.model ? item.icon : item['icon-alt']"
            append-icon=""
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>
                  {{ item.text }}
                </v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-for="(child, i) in item.children"
              :key="i"
              exact
              :to="child.path"
            >
              <v-list-item-action v-if="child.icon">
                <v-icon>{{ child.icon }}</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title>
                  {{ child.text }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>

          <v-list-item
            v-else
            :key="item.text"
            :to="item.path"
            exact
          >
            <v-list-item-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                {{ item.text }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-list>

    </v-navigation-drawer>

    <v-app-bar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      app
      color="white"
      height="54"
      light
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title
        style="width: 200px"
        class="ml-0 pl-4"
        color="#697bc1"
      >
        <span class="hidden-sm-and-down none-select-css cow-title" @click="$router.push({name:'Home'})">Cow Moo~</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-bell</v-icon>
      </v-btn>

      <v-menu
        v-model="userMenu"
        absolute
        :close-on-content-click="false"
        :nudge-width="240"
        :position-y="49"
        origin="top right"
        transition="scale-transition"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            large
            v-bind="attrs"
            v-on="on"
          >
            <v-avatar
              size="32px"
              item
            >
              <v-img
                src="https://ae01.alicdn.com/kf/Hb2a78048cbbb43998fa4ed3add74f57eC.jpg"
                alt="me"
              ></v-img>
            </v-avatar>
          </v-btn>
        </template>

        <v-card>
          <div class="d-flex flex-column align-center pa-3">
            <v-avatar
              size="70px"
              item
            >
              <v-img
                src="https://ae01.alicdn.com/kf/Hb2a78048cbbb43998fa4ed3add74f57eC.jpg"
                alt="me"
              ></v-img>
            </v-avatar>
            <v-chip
              class="mt-2"
              color="pink"
              label
              x-small
              dark
              style="font-size: 12px;font-weight: 400"
            >
              {{user.userRole===1?'游客':'管理员'}}
            </v-chip>
            <span class="mt-1" style="font-size: 14px;font-weight: 600">{{user.nickName}}</span>
          </div>

          <div class="mb-1">
            <div class="pl-4 m-list-item none-select-css pa-1" v-ripple>
              <span>
                <v-icon small>mdi-account-circle-outline</v-icon>
              </span>
              <span style="font-size: 12px;">
                管理你的账户
              </span>
            </div>
          </div>
          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn outlined color="#777" x-small @click="signOut">登出</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </v-app-bar>

    <v-main>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </v-main>

  </div>
</template>

<script>
import UserMenuMixin from '../mixins/userMenuMixin'

export default {
  name: 'Home',

  mixins: [UserMenuMixin],
  data: () => ({
    alert: true,
    drawer: null,
    // 左侧菜单
    items: [
      {
        icon: 'home',
        text: '首页',
        routeName: 'Index',
        path: '/cow/index'
      },
      {
        icon: 'article',
        text: '内容管理',
        routeName: 'ArticleManager',
        path: '/cow/article'
      },
      {
        icon: 'category',
        text: '分类管理',
        routeName: 'CategoryManager',
        path: '/cow/category'
      },
      {
        icon: 'category',
        text: '友链',
        routeName: 'Friend',
        path: '/cow/friend'
      },

    ],
  }),

  methods: {
    handleCreateArticleBtnClick () {
      this.$router.push({ name: 'CreateArticle' })
    }
  }
}
</script>

<style>
  .cow-title:hover {
    cursor: pointer;
  }

  .m-list-item:hover {
    cursor: pointer;
    background-color: #eee;
  }
</style>
